<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地" />
		<title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

		<!-- 引入Bootstrap核心样式文件 -->
		<link th:href="@{/asserts/bootstrap-3.4.1/css/bootstrap.min.css}" rel="stylesheet">
		<!-- 引入jQuery核心js文件 -->
		<script th:src="@{/asserts/javascript/jQuery-1.12.4.js}"></script>
		<!-- 引入BootStrap核心js文件 -->
		<script th:src="@{/asserts/bootstrap-3.4.1/js/bootstrap.min.js}"></script>


		<link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon" />
		<link th:href="@{/asserts/css/common.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/top.css}" rel="stylesheet" />
		<link th:href="@{/asserts/css/foot.css}" rel="stylesheet" />

		<link th:href="@{/asserts/css/book-detail.css}" rel="stylesheet" />
		<script th:src="@{/asserts/javascript/book-detail.js}"></script>
	</head>

	<body>
		<!--  最顶部的导航栏 -->
		<div th:replace="~{commons/tag::topNav}"></div>
		<!--  =================== head =============================== -->
		<div th:replace="~{commons/tag::headerNav}"></div>
		
		<!-- =========================== 书本详情页面 =============================== -->

		<div class="container no-padding book-detail-bg">
		</div>

		<div class="index mt50">
			<div class="container no-padding">
				<a th:href="@{/book/index}">首 页</a>
			</div>
		</div>

		<!-- 书本详情 -->
		<div class="container no-padding">
			<div class="book-img fl">
				<img th:src="|http://localhost:10001/${book.imgsrc}|" />
			</div>

			<div class="book-info fl">
				<p id="bookName" class="book-name" th:text="${book.name}">JAVA核心技术卷I</p>
				<p class="book-price mt50">价格 :<font color="red">￥</font><span id="bookPrice" th:text="${book.price}">139.00</span> </p>
				<p id="bookCollect" class="book-collect mt50">收藏 : <span th:text="${book.collectioncount}"></span></p>

				<div class="book-count mt50 form-inline">
						购买数量 :
					<div class="input-group">
						<span class="input-group-addon glyphicon glyphicon-minus"></span>
						<input type="text" class="form-control" id="buyCount" maxlength="3" value="1" >
						<span class="input-group-addon glyphicon glyphicon-plus"></span>
					</div>
						库存量 : <span th:text="${book.storecount}">99</span>
				</div>

				<div class="btn-box mt50">
					<button class="btn btn-primary" th:onclick="|addCart(${book.id})|">添加购物车</button>
					<button class="btn btn-danger">立即购买</button>
				</div>

			</div>
		</div>

		<script th:inline="javascript">
			function addCart(bid){
				//alert(bid);
				let buyCount = $("#buyCount").val();
				//alert(buyCount);
				let baseUrl = /*[[@{/}]]*/ ;
				console.log(baseUrl)
				let url =baseUrl+ "cart/addCart" ;
				let params = "bookId="+bid +"&buyCount="+buyCount ;
				$.post(url,params,function (res){
					if (res == 'noLogin') {
						alert("请先登录!");
						location.href = "../login.html" ;
					}else if (res == '1') {
						alert("添加成功!");
					}else {
						alert("添加失败!");
					}
				},"text")
			}
		</script>

		<!--显示详情   和   评论 -->

		<!-- =============== 最后的网站底部 =============== -->
		<div th:replace="~{commons/tag::footer}"></div>
	</body>
</html>
